<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <script src="./area.js"></script>
    <script>
        // 将数据渲染到页面上,并进行关联
        // place = {aa:[{bb:[{cc:dd},{cc:dd}]}]}
        // 1.获取页面中的四个下个标签
        var sels = document.querySelectorAll("select");
        // 2.给第一个下拉框中显示所有省份
        // 3.获取所有省份
        for(var sheng in place){
            // 4.每获取一个省份,就将数据添加至一个option标签; 每次就创建一个option标签
            var option = document.createElement("option");
            // 5.将当前循环获取的省份添加至标签内容
            option.innerHTML = sheng;
            // 6.将创建好的标签追加至第一个下拉框中
            sels[0].appendChild(option);
        }


        // 10.监听当第一个下拉框的值更改时,需要同时更改第二个下拉框包裹所有市的哪个对象
        sels[0].onchange = function(){
            // 11.获取到选中的省份
            // console.log(this.value);
            // 14.当第一个下拉框值更改,设置市的内容同时更改
            city()
        }
        // 13.省份值在多次调用时不一样,所有给省份设置为参数
        city()
        // 12因为城市重复使用,选择封装城市,将第7,8,9步剪切至函数内
        function city(a){
            // 7.获取城市的数据, 渲染给第二个下拉框 哪个省的城市?先假设是河南省的
            // 8.先通过最外层对象找到包裹市的哪个对象(不传参了直接获取第一个下拉框的值)
            var shis = place[sels[0].value][0];
            // 15.当更改市的值,需要先将之前的值清空
            sels[1].innerHTML = "";
            // 9.获取这个包裹市的对象的所有属性名(属性名就是市)
            for(var shi in shis){
                // 4.每获取一个省份,就将数据添加至一个option标签; 每次就创建一个option标签
                var option = document.createElement("option");
                // 5.将当前循环获取的省份添加至标签内容
                option.innerHTML = shi;
                // 6.将创建好的标签追加至第一个下拉框中
                sels[1].appendChild(option);
            }
            // 19.在市的函数内调用
            qu()
        }
        // 20.监听市变化时,设置区的变化
        sels[1].onchange = qu;
        // qu()
        // 17.因为省变动或市变动时,区都要变动,所以封装函数,将第16剪切至函数内
        function qu(){
            // 16.区,获取某个省某个市所有区的数据,渲染给第三个下拉框
            // 哪个省?哪个市? 假设是河南省郑州市
            // 18.将假设的省份与城市换成第一个下拉框和第二个下拉框的值
            var arr = place[sels[0].value][0][sels[1].value];
            // var arr = place["河南省"][0]["郑州市"];
            // arr=== [{cc:dd},{cc:dd},{cc:dd},{cc:dd}]

             // 15.当更改市的值,需要先将之前的值清空
             sels[2].innerHTML = "";
            arr.forEach(function(item){
                for(var key in item){
                    // 4.每获取一个省份,就将数据添加至一个option标签; 每次就创建一个option标签
                    var option = document.createElement("option");
                    // 5.将当前循环获取的省份添加至标签内容
                    option.innerHTML = key;
                    // 6.将创建好的标签追加至第一个下拉框中
                    sels[2].appendChild(option);
                }
            });
            jie()
        }

        sels[2].onchange = jie;

        // jie()
        // 22.封装函数
        function jie(){
            // 21.获取某个省某个市某个区的全部街道
        // 河南省郑州市中原区
            // var str = place['河南省'][0]["郑州市"][0]["中原区"];
            var i = sels[2].selectedIndex;
            var str = place[sels[0].value][0][sels[1].value][i][sels[2].value];

            // 15.当更改市的值,需要先将之前的值清空
            sels[3].innerHTML = "";

            var arr = str.split("、");
            arr.forEach(function(item){
                // 4.每获取一个省份,就将数据添加至一个option标签; 每次就创建一个option标签
                var option = document.createElement("option");
                // 5.将当前循环获取的省份添加至标签内容
                option.innerHTML = item;
                // 6.将创建好的标签追加至第一个下拉框中
                sels[3].appendChild(option);
            })
        }
       


    </script>
</body>
</html>